import React from 'react';
import {
    View,
    Text,
    Image,
    ScrollView,
    StyleSheet,
    TouchableOpacity
} from 'react-native';
import NavigationUtil from '../../navigator/NavigationUtil';
import {SafeAreaView} from 'react-navigation';
import { screen } from "../../public/common";
import color from '../../public/widget/color';
import {BaseUrl} from '../../public/dao/DataStore';
import BackPressComponent from '../../components/BackPressComponent';
export default class CreditcardDetail extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: () => this.onBackPress()});
        this.params = this.props.navigation.state.params;
        this.state = {
            pageData:this.params
        }
    }
    componentDidMount(){
        this.backPress.componentDidMount();
    }
    componentWillUnmount(){
        this.backPress.componentWillUnmount();
    }
    onBackPress() {
        NavigationUtil.goBack(this.props.navigation);
        return true;
    }
    _open=(url,name)=>{
        NavigationUtil.goPage({
            name,
            url
        },'MyWebView')
	}
    render() {
        const {pageData} = this.state;
        return (
            <SafeAreaView style={{height:screen.height}}>
                <ScrollView>
                    <View style={styles.container}>
                        <Image style={styles.ImageCart} 
                            resizeMode={"contain"} 
                            source={{uri:`${BaseUrl}/${pageData.image_url}`}} 
                        />
                        <View style={styles.nameView}>
                            <View style={styles.contentView}>
                                <Text style={styles.text}>{pageData.name}</Text>
                                <Text style={styles.borderfont}>{pageData.advantage}</Text>
                            </View>
                        </View>
                        <View style={styles.quanyiView}>
                            <Text style={styles.text}>专属权益</Text>
                            <Text style={styles.describefont}>{pageData.describe}</Text>
                        </View>
                        <TouchableOpacity onPress={()=>{
                                this._open(pageData.url,pageData.name)
                            }}>
                            <View style={styles.btnFont} ><Text style={styles.btnText}>立即申请</Text></View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </SafeAreaView>
            )
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1, 
        backgroundColor: "#fff",
        height:screen.height
    },
    nameView:{
        marginTop:18,
        textAlign:'left',
        padding: 10,
    },
    contentView:{
        borderBottomColor:color.border,
        borderBottomWidth: 1,
    },
    ImageCart:{
        width:screen.width-20,
        height:230,
        marginTop: 20,
        marginLeft:10
    },
    text: {
        fontSize: 18,
    },
    borderfont:{
        color:color.gray,
        marginTop:10,
        marginBottom: 20,
    },
    quanyiView:{
        marginTop:10,
        paddingLeft: 10,
    },
    btnFont:{
        width:screen.width-200,
        marginLeft:100,
        backgroundColor:color.themeColor,
        paddingTop:10,
        paddingBottom:10,
        borderRadius:20,
        marginTop:40
    },
    describefont:{
        color:color.gray,
        marginTop:10,
    },
    btnText:{
        fontSize:18,
        color:'#fff',
        textAlign:'center',
    }
});